class MpIcon extends HTMLElement {
  static get observedAttributes() {
    return ["isfilled", "icon"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (this.isConnected) {
      this.render();
    }
  }

  render() {
    const icon = this.getAttribute("icon");
    const isFilled = this.hasAttribute("isfilled");

    // Проверяем наличие атрибута icon, чтобы определить, нужно ли отображать иконку
    if (icon) {
      const filledClass = isFilled ? " filled" : "";
      this.shadowRoot.innerHTML = `
          <style>
            @import url('./src/mp-design-tokens/icons/icons.css');
          </style>
          <span class="material-symbols${filledClass}">${icon}</span>
        `;
    } else {
      // Если атрибут icon отсутствует, очищаем содержимое shadow DOM
      this.shadowRoot.innerHTML = "";
    }
  }
}

customElements.define("mp-icon", MpIcon);
